<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box"></div>

  <script>
    // 递归：递归函数是一种调用自己的函数（必须有停止条件）
    // 使用场景：遍历不确定层级的对象或者数组时使用

    // function fn(n) {
    //   if (n < 10) {
    //     console.log(n)
    //     fn(n + 1)
    //   }
    // }
    // fn(1)


    // function fn1(n) {
    //   if (n <= 1) return n
    //   return n * fn1(n - 1)
    // }
    // fn1(5)



    var arr = [
      [[[[1,2],3,4],5,6],7,8],
      9,
      0
    ]
    
    function logArr(array) {
      for (var i = 0; i < array.length; i++) {
        if (Array.isArray(array[i])) {
          logArr(array[i])
        } else {
          console.log(array[i])
        }
      }
    }

    // logArr(arr)


    function flat(array) {
      var arr = []
      for(var i = 0; i < array.length; i ++) {
        if (Array.isArray(array[i])) {
          arr = arr.concat(flat(array[i]))
        } else {
          arr.push(array[i])
        }
      }
      return arr
    }


    // console.log(flat(arr))


    function logObj(obj) {
      for(var key in obj) {
        if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
          console.log(key, obj[key])
          logObj(obj[key])
        } else {
          console.log(key, obj[key])
        }
      }
    }

    // logObj({
    //   name: '小明',
    //   age: 22,
    //   info: {
    //     a: {
    //       b: {
    //         c: 1
    //       },
    //       b1: 'b1111'
    //     },
    //     a1: 'a1111'
    //   }
    // })



    var menu = [
      { name: 'index.html' },
      {
        name: 'pages',
        children: [
          {
            name: 'home',
            children: [
              { name: 'home.html' },
              { name: 'home.js' },
              { name: 'home.css' },
              {
                name: 'detail',
                children: [
                  { name: 'detail.html' },
                  { name: 'detail.js' }
                ]
              }
            ]
          },
          {
            name: 'list',
            children: [
              { name: 'list.html' },
              { name: 'list.js' },
              { name: 'list.css' }
            ]
          },
        ]
      },
      { name: 'common.css' },
      { name: 'common.js' }
    ]


    function createTree(arr) {
      var str = '<ul>'
      
      arr.forEach(function (item) {
        console.log(item)
        str += '<li>'
        str += item.name
        if (Array.isArray(item.children)) {
          str += createTree(item.children)
        }
        str += '</li>'
      })

      str += '</ul>'
      return str
    }

    var tree = createTree(menu)
    document.querySelector('.box').innerHTML = tree






  </script>
</body>
</html>